<template>
	<view class="rate">
		<!-- 1 -->
		<view class="item">
			<view class="label">
				时效评价
			</view>
			<view class="star">
				<van-rate
				  :value="aging"
				  :size="20"
				  allow-half
				  color="#007eff"
				  void-color="#eee"
				  void-icon="star"
				  @change="onAgingChange"
				/>
			</view>
		</view>
		<!-- 1 -->
		<view class="item">
			<view class="label">
				诚信评价
			</view>
			<view class="star">
				<van-rate
				  :value="integrity"
				  :size="20"
				  allow-half
				  color="#007eff"
				  void-color="#eee"
				  void-icon="star"
				  @change="onInteChange"
				/>
			</view>
		</view>
		<!-- 2 -->
		<view class="item">
			<view class="label">
				态度评价
			</view>
			<view class="star">
				<van-rate
				  :value="attitude"
				  :size="20"
				  allow-half
				  color="#007eff"
				  void-color="#eee"
				  void-icon="star"
				  @change="onAttiChange"
				/>
			</view>
		</view>
		<!-- 2 -->
		<view class="item">
			<view class="label">
				质量评价
			</view>
			<view class="star">
				<van-rate
				  :value="quality"
				  :size="20"
				  allow-half
				  color="#007eff"
				  void-color="#eee"
				  void-icon="star"
				  @change="onQuaChange"
				/>
			</view>
		</view>
		<view class="item">
			<view class="label">
				评价留言
			</view>
			
		</view>
		<view class="textarea">
			<textarea type="textarea" v-model="explain" placeholder="请输入评价"></textarea>
		</view>
		
		
		<view class="item">
			<button type="primary" @click="SubRate">提交评价</button>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				aging: 0,
				integrity: 0,
				attitude: 0,
				quality: 0,
				explain: "",
				orderid: "",
			}
		},
		computed: {
			OrderInfo() {
				return this.$store.state.OrderInfo
			},
			token() {
				return this.$store.state.token;
			}
		},
		onLoad(param) {
			if(param.orderid) {
				this.orderid = param.orderid
			} else {
				this.orderid = ""
			}
		},
		methods: {
			// 时效变化
			onAgingChange( e ) {
				// console.log(e);
				this.aging = e.detail
			},
			// 诚信评分
			onInteChange( e ) {
				this.integrity = e.detail
			},
			// 态度评分
			onAttiChange( e ) {
				this.attitude = e.detail
			},
			// 质量评分
			onQuaChange( e ) {
				this.quality = e.detail
			},
			//  提交评价
			async SubRate() {
				let self = this
				let data = {
					aging: this.aging,
					integrity: this.integrity,
					attitude: this.attitude,
					quality: this.quality,
					explain: this.explain,
					token: this.token,
					orderid: this.OrderInfo.orderid,
					master: this.OrderInfo.master
				}
				let res = await this.$Request("POST","/appraise/datainfo", data)
				console.log(res);
				let code = res.data.code
				if(code == 200 || code == 202 || code == 204) {
					
						uni.showToast({
							title:"评价成功",
							icon:"success"
						})
					self.$store.commit("getAreadyRate", true)
					self.$store.commit("getOrderInfo", {})
					self.$store.dispatch("emitOrderInfo", {})
					setTimeout(() => {
						uni.switchTab({
							url:"/pages/order/order",
							success() {
								console.log("评价成功");
							}
						})
					}, 1000)
				} else {
					uni.showToast({
						title:"评价失败",
						icon:"loading"
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.rate {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		.item {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 20rpx 0;
			.label {
				width: 250rpx;
				text-align: center;
			}
			.star {
				// flex: 1;
				// height: 300rpx;
				// border: 1px solid #aaa;
			}
			button {
				width: 400rpx;
				margin: 20rpx auto;
				
			}
		}
		.textarea {
			width: 100%;
			box-sizing: border-box;
			padding: 10rpx 60rpx;
			border: 1px solid #f2f2f2;
			textarea {
				width: 100%;
			}
		}
	}
</style>
